<template>
	<div class="login-container">
		<h1 style="text-align: center;">用户登录</h1>
			<!-- 错误提示 -->
			<div v-if="errorMessage" class="error-message">
				{{ errorMessage }}
			</div>

			<!-- 用户名输入 -->
			<div class="input-group">
				<label for="username">用户名</label>
				<input id="username" v-model="formData.username" type="text" required :disabled="loading" />
			</div>

			<!-- 密码输入 -->
			<div class="input-group">
				<label for="password">密码</label>
				<input id="password" v-model="formData.password" type="password" required :disabled="loading" />
			</div>


			<!-- 登录和注册按钮 -->
			<div class="button-group">
				<button type="button" :disabled="loading" @click="handleLogin">
					{{ loading ? '登录中...' : '立即登录' }}
				</button>
				<button type="button" :disabled="loading" @click="handleRegister">
					{{ loading ? '注册中...' : '立即注册' }}
				</button>
			</div>
	</div>
</template>

<script>
import { login, register } from '@/utils/index'

export default {
	data() {
		return {
			formData: {
				username: '',
				password: ''
			},
			loading: false,
			errorMessage: '',
			rememberMe: false
		}
	},
	mounted() {
		try {
			const savedUsername = uni.getStorageSync('savedUsername')
			const savedPassword = uni.getStorageSync('savedPassword')
			if (savedUsername && savedPassword) {
				this.formData.username = savedUsername
				this.formData.password = savedPassword
				this.rememberMe = true
			}
		} catch (e) {
			console.error('读取存储失败:', e)
		}
	},
	methods: {
		async handleLogin() {
			this.errorMessage = ''
			this.loading = true

			try {
				const response = await login({
					username: this.formData.username,
					password: this.formData.password
				})
				console.log('登录成功:', response);
				if (response) {
					// 保存 token
					uni.setStorageSync('access_token', response)
					this.loading = false

					// 跳转到首页
					uni.navigateTo({
						url: '/pages/index/find'
					})
				}
			} catch (error) {
				console.error('登录失败:', error)
				this.errorMessage = '登录失败，请检查用户名和密码'
				this.loading = false
			}
		},
		async handleRegister() {
			this.errorMessage = ''
			this.loading = true
			console.log('zhuce')
			try {
				const response = await register({
					username: this.formData.username,
					password: this.formData.password
				})
				if (response) {
					this.loading = false
					uni.showModal({
						title: '注册成功',
						content: '请登录',
						showCancel: false,
						confirmText: '确定'
					})
				}
			} catch (error) {
				console.error('注册失败:', error)
				this.errorMessage = '注册失败，请稍后重试'
				this.loading = false
			}
		}
	}
}
</script>

<style scoped>
.login-container {
	max-width: 400px;
	margin: 2rem auto;
	padding: 2rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.input-group {
	margin-bottom: 1.5rem;
}

label {
	display: block;
	margin-bottom: 0.5rem;
}

input {
	width: 100%;
	height: 100%;
	padding: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 4px;
}

button {
	width: 100%;
	padding: 0.75rem;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-bottom: 10px;
}

button:disabled {
	background-color: #6c757d;
	cursor: not-allowed;
}

.error-message {
	color: #dc3545;
	margin-bottom: 1rem;
	padding: 0.5rem;
	background-color: #f8d7da;
	border-radius: 4px;
}
</style>